<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <meta content="ie=edge" http-equiv="X-UA-Compatible">
    <script src="/natal/js/rem.js"></script>
    <link rel="stylesheet" href="/natal/css/style.css?v=32259">
    <link rel="stylesheet" href="/natal/css/dating.css?v=40156">
    <title>本命预测</title>
</head>
<body>
<div class="money-report">
    <div class="nav" style="visibility:{$is_show_nav?'visible':'hidden'}">
        <div class="nav-box">
            <div class="bg-color" style="height: {$height/50 + 0.88}rem"></div>
            <div class="to-back" onclick="commonJsToNative('local', 'back');">
                <div class="img"></div>
            </div>
            <div class="title-name">{$data.name}</div>
        </div>
    </div>
    <div class="header-box header-box{$height}"></div>
    <div class="middle-box">
        <div class="top-box" style="margin-top:-0.16rem">
            <div class="bg-box">
                <img class="top-box-img" src="/natal/images/top-img-dating.png" alt="">
                <div class="text-box">
                    <p class="pre-text">{$text.text1}</p>
                </div>
            </div>
        </div>
        <div class="unlock-recode-box {$is_expand?'expand':''} {$unlock_recode_info.recode_is_change?'change':''}" data-expand="{$unlock_recode_info.recode_is_change?1:0}">
            <div class="unlock-recode-title">
                <span class="title">购买时的档案信息</span>
                <div class="is-expand-box"><span></span></div>
            </div>
            {foreach name="unlock_recode_info.info" item="recodeInfo"}
            <div class="recode-info-box">
                <div class="recode-name-box"><img src="{$recodeInfo.avatar}" alt=""><span class="recode-name">{$recodeInfo.name}</span></div>
                {foreach name="$recodeInfo.info_list" item="listItem"}
                <div class="recode-info-item">
                    <span class="info-title">{$listItem.title}</span>
                    <span class="info-value">{$listItem.content}</span>
                </div>
                {/foreach}
            </div>
            {/foreach}
            <div class="recode-change-box">
                <img src="/natal/images/gaojing.png" alt="" class="tip-icon">
                <img src="/natal/images/close-icon.png" alt="" class="close-icon">
                <div class="change-title">检测到当前档案出生时间已发生修改</div>
                <div class="change-desc">已购买的运势内容不会随着档案的修改重新计算</div>
                <div class="change-btn">再次开通</div>
            </div>
        </div>
        <div class="curv-box">
            <div class="curv-title scrollTitle" data-index="m-1">
                <img src="/natal/images/curv-title-dating.png?v=1" alt="">
            </div>
            <div class="curv-des">
                <p class="curv_des1">曲线图中年岁展示为虚岁年份</p>
                <p class="curv_des2">(例：30周岁代表实际周岁的29-30岁阶段)</p>
            </div>
            <div class="curv-area">
                <div class="curv-area-content">
                    <canvas id="curv">canvas</canvas>
                </div>
            </div>
            <div class="curv-tips">
                <div class="good"><i></i>婚姻机缘好的时期</div>
                <div class="bad"><i></i>婚姻机缘低的时期</div>
            </div>
        </div>
        <div class="content-box">
            <!--婚姻概述-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-2">
                    <img src="/natal/images/title-hytz-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text2}</p>
                </div>
                <!--婚姻特征-->
                <div class="title-item3 scrollTitle" data-index="m-2-1">
                    <span class="title-name type1">婚姻特征</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140100]??'无词条'}</p>
                </div>
                <!--婚姻是否顺遂-->
                <div class="title-item3 scrollTitle" data-index="m-2-2">
                    <span class="title-name type2">婚姻是否顺遂</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140101]??'无词条'}</p>
                </div>
                <!--早婚or晚婚-->
                <div class="title-item3 scrollTitle" data-index="m-2-3">
                    <span class="title-name type1">早婚or晚婚</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[1]['content_text'][140102]??'无词条'}</p>
                </div>
            </div>

            <!--适宜结婚的年龄-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-3">
                    <img src="/natal/images/title-smshhjh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text5}</p>
                </div>
                <div class="curv-area" style="padding: 0.4rem 0.4rem 0.02rem;overflow: hidden;">
                    <div class="curv-area-content" style="position: relative;transform: scale(1, 1);
zoom: 0.25;overflow: hidden;height: 800px;">
                        <canvas id="curv-datting">canvas</canvas>
                    </div>
                </div>
            </div>

            <!--伴侣条件特征-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-4">
                    <img src="/natal/images/title-jhdxtjrh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text4}</p>
                </div>
                <!--性格特征-->
                <div class="title-item3 scrollTitle" data-index="m-4-1">
                    <span class="title-name type1">性格特征</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140300]??'无词条'}</p>
                </div>
                <!--经济能力-->
                <div class="title-item3 scrollTitle" data-index="m-4-2">
                    <span class="title-name type2">经济能力</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140301]??'无词条'}</p>
                </div>
                <!--事业特质-->
                <div class="title-item3 scrollTitle" data-index="m-4-3">
                    <span class="title-name type1">事业特质</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140302]??'无词条'}</p>
                </div>
                <!--家庭背景-->
                <div class="title-item3 scrollTitle" data-index="m-4-4">
                    <span class="title-name type2">家庭背景</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140303]??'无词条'}</p>
                </div>
                <!--相识途径-->
                <div class="title-item3 scrollTitle" data-index="m-4-5">
                    <span class="title-name type1">相识途径</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[3]['content_text'][140304]??'无词条'}</p>
                </div>
            </div>

            <!--婚后感情生活-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-5">
                    <img src="/natal/images/title-hhgqrh-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text6}</p>
                </div>
                <!--婚后相处模式-->
                <div class="title-item3 scrollTitle" data-index="m-5-1">
                    <span class="title-name type1">婚后相处模式</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140500]??'无词条'}</p>
                </div>
                <!--婚后经济状态-->
                <div class="title-item3 scrollTitle" data-index="m-5-2">
                    <span class="title-name type2">婚后经济状态</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140501]??'无词条'}</p>
                </div>
                <!--婚后幸福指数-->
                <div class="title-item3 scrollTitle" data-index="m-5-3">
                    <span class="title-name type1">婚后幸福指数</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140502]??'无词条'}</p>
                </div>
                <!--婚后矛盾及建议-->
                <div class="title-item3 scrollTitle" data-index="m-5-4">
                    <span class="title-name type2">婚后矛盾及建议</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[5]['content_text'][140503]??'您和您的另一半婚后相处较为顺畅～'}</p>
                </div>
            </div>

            <!--姻缘的阻碍-->
            <div class="item-box">
                <div class="title-box scrollTitle" data-index="m-6">
                    <img src="/natal/images/title-smzzandhy-dating.png" alt="">
                </div>
                <div class="t1-box">
                    <p class="t1 pre-text">{$text.text3}</p>
                </div>
                <!--不适合的对象-->
                <div class="title-item3 scrollTitle" data-index="m-6-1">
                    <span class="title-name type1">不适合的对象</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][140200]??'无词条'}</p>
                </div>
                <!--错过姻缘的原因-->
                <div class="title-item3 scrollTitle" data-index="m-6-2">
                    <span class="title-name type2">错过姻缘的原因</span>
                </div>
                <div class="t3-box">
                    <p class="t3 pre-text">{$data.text[2]['content_text'][140201]??'无词条'}</p>
                </div>
            </div>
        </div>
        <div class="bottom-box">
            <div class="bg-box">
                <div class="text-box">
                    <p class="pre-text">{$text.end_desc}</p>
                </div>
            </div>
            <img class="bt-star" src="/natal/images/star_name.png" alt="">
            <img class="bt-img" src="/natal/images/star_bottom.png" alt="">
        </div>
    </div>
    <!--抽屉-->
    <div class="menu-box">
        <div class="menu-button">
            <img src="/natal/images/menu-button_dating.png" alt="目录"/>
        </div>
        <div class="menu-shadow" id="menu-shadow"></div>
        <div class="menu-list">
            <div class="menu-title">
                <span class="head">目录</span>
                <i class="collapse"></i>
            </div>
            <dl>
                <dt data-index="m-1">1/婚姻机缘较好的年份</dt>
            </dl>
            <dl>
                <dt data-index="m-2">2/婚姻概述</dt>
                <dd>
                    <ul>
                        <li data-index="m-2-1"><i class="circle"></i>婚姻特征</li>
                        <li data-index="m-2-2"><i class="circle"></i>婚姻是否顺遂</li>
                        <li data-index="m-2-3"><i class="circle"></i>早婚or晚婚</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-3">3/适宜结婚的年龄</dt>
            </dl>
            <dl>
                <dt data-index="m-4">4/伴侣条件特征</dt>
                <dd>
                    <ul>
                        <li data-index="m-4-1"><i class="circle"></i>性格特征</li>
                        <li data-index="m-4-2"><i class="circle"></i>经济能力</li>
                        <li data-index="m-4-3"><i class="circle"></i>事业特质</li>
                        <li data-index="m-4-4"><i class="circle"></i>家庭背景</li>
                        <li data-index="m-4-5"><i class="circle"></i>相识途径</li>
                    </ul>
                </dd>
            </dl>
            <dl style="margin-bottom: 1rem">
                <dt data-index="m-5">5/婚后感情生活</dt>
                <dd>
                    <ul>
                        <li data-index="m-5-1"><i class="circle"></i>婚后相处模式</li>
                        <li data-index="m-5-2"><i class="circle"></i>婚后经济状态</li>
                        <li data-index="m-5-3"><i class="circle"></i>婚后幸福指数</li>
                        <li data-index="m-5-4"><i class="circle"></i>婚后矛盾及建议</li>
                    </ul>
                </dd>
            </dl>
            <dl>
                <dt data-index="m-6">6/姻缘的阻碍</dt>
                <dd>
                    <ul>
                        <li data-index="m-6-1"><i class="circle"></i>不适合的对象</li>
                        <li data-index="m-6-2"><i class="circle"></i>错过姻缘的原因</li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>
</div>
{include file="../apps/web/view/public/sensors.html" /}
<script>
    window.navHeight = {$height};
    window.levels = {$levels};
    window.appType = '{$appType}';
    window.version = '{$version}';
    window.isShow = 1; // 1抽屉隐藏 2抽屉显示
</script>
<script type="text/javascript" src="/natal/js/jquery-v2.1.1.min.js"></script>
<script type="text/javascript" src="/natal/js/common.js?v=36"></script>
<script type="text/javascript" src="/natal/js/canvas.js?v=34"></script>
<script type="text/javascript">
    window.onload = function () {
        window.drawCanvas.colors = ['#809BFF', '#83FED1'];
        window.drawCanvas.startYear = 20;
        window.drawCanvas.Years = 61;
        window.drawCanvas.initload('curv', window.levels, 0);

        var dattingYears = {$data.text[4]['levels']};
        // 最容易结婚的年纪 3-14区间
        var dattingCanvas = document.getElementById('curv-datting'), max = 14, min = 3;
        var dattingCanvasWidth = parseFloat($(dattingCanvas).parent().css('width')), ds = 4, dattingCanvasHeight = 200 * ds;
        dattingCanvas.setAttribute('width', dattingCanvasWidth + 'px');
        dattingCanvas.setAttribute('height', dattingCanvasHeight + 'px');
        var dattingCtx = dattingCanvas.getContext("2d");
        dattingCtx.clearRect(0, 0, dattingCanvasWidth, dattingCanvasHeight)
        dattingCtx.lineJoin = 'round';
        dattingCtx.lineCap = 'round';

        var posX = dattingCanvasWidth / 10;
        var startX = posX / 2;
        var curvDatas = [];
        // 准备绘制最高的10个年份
        for (var j = 0; j < 10; j++) {
            var x = startX + j * posX;
            var y = (max - dattingYears[j]['s']) / (max - min) * 155 * ds + 35 * ds;

            // 绘制年龄
            dattingCtx.beginPath();
            dattingCtx.font = 20 * ds + 'px serif';
            dattingCtx.fillStyle = '#00E9A0';
            dattingCtx.fillText(dattingYears[j]['y'], x - 20 * ds / 2, 20 * ds);
            dattingCtx.closePath();

            // 绘制虚线
            dattingCtx.beginPath();
            dattingCtx.setLineDash([5 * ds]);
            dattingCtx.moveTo(x, 30 * ds);
            dattingCtx.lineTo(x, dattingCanvasHeight);
            dattingCtx.lineWidth = ds;
            dattingCtx.strokeStyle = '#DDDDDD';
            dattingCtx.stroke();
            dattingCtx.closePath();

            curvDatas.push({x: x, y: y})
        }

        // 绘制曲线
        var endLength = curvDatas.length - 1, b = curvDatas[0];
        dattingCtx.beginPath();
        dattingCtx.strokeStyle = '#6FD6F7';
        dattingCtx.globalAlpha = 1;
        dattingCtx.lineWidth = 2 * ds;
        dattingCtx.setLineDash([]);
        dattingCtx.moveTo(b.x, b.y);
        for (var k = 0; k < endLength; k++) {
            var e = curvDatas[k + 1],
                c = (curvDatas[k].x + curvDatas[k + 1].x) / 2,
                c1 = {x: c, y: b.y},
                c2 = {x: c, y: e.y};
            dattingCtx.bezierCurveTo(c1.x, c1.y, c2.x, c2.y, e.x, e.y);
            b = e;
        }
        dattingCtx.stroke();
        dattingCtx.closePath();

        for (var l = 0; l < curvDatas.length; l++) {
            var x = curvDatas[l].x, y = curvDatas[l].y;
            // 绘制圆环⭕️
            dattingCtx.beginPath();
            dattingCtx.moveTo(x, y);
            dattingCtx.globalAlpha = 1;
            dattingCtx.arc(x, y, 7 * ds, 0, 2 * Math.PI, true);
            dattingCtx.closePath();
            dattingCtx.fillStyle = '#00E9A0';
            dattingCtx.fill();

            dattingCtx.beginPath();
            dattingCtx.moveTo(x, y);
            dattingCtx.globalAlpha = 1;
            dattingCtx.arc(x, y, 4 * ds, 0, 2 * Math.PI, true);
            dattingCtx.closePath();
            dattingCtx.fillStyle = '#fff';
            dattingCtx.fill();
        }
    }
    $('.unlock-recode-box.expand.change .recode-change-box .change-btn').click(function (){
        commonJsToNative('local','pay_order?type=7&rid={$Request.get.rid}&gid={$Request.get.gid}&live_id={$Request.get.live_id|default="0"}&need_auth=1','再次开通','一生报告页');
    })
</script>
</body>
</html>
